<template>
    <d2-container :filename="filename">
        <template slot="header">
            <el-form
                    :inline="true"
                    :model="queryParam"
                    ref="form"
                    size="mini"
                    style="margin-bottom: -18px;">
                <el-form-item>
                    <el-button type="primary" icon="el-icon-plus">
                        添加
                    </el-button>
                    <el-button v-if="isShowBatchDeleteBtn" type="danger" icon="el-icon-delete">
                        批量删除
                    </el-button>
                </el-form-item>
            </el-form>
        </template>
        <!--table-->
        <el-table v-loading="listLoading" :data="tableData"
                  :stripe="true"
                  @selection-change="handleSelectionChange"
                  border fit highlight-current-row style="width: 100%;">

            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column label="编号" width="180" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="编码" width="180" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.code }}</span>
                </template>
            </el-table-column>

            <el-table-column label="名称" width="180" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>

            <el-table-column label="图标" width="180" align="center">
                <template slot-scope="scope">
                    <div>
                        <d2-icon-svg class="icon" :name="scope.row.icon"/>
                    </div>
                </template>
            </el-table-column>

           <!-- <el-table-column label="品牌大图" width="180" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.posters" style="width: 80px;height: 80px;"/>
                </template>
            </el-table-column>-->

            <el-table-column label="是否可用" width="180" align="center">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.enabled"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>

            <el-table-column label="品牌故事" width="180" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.story}}</span>
                </template>
            </el-table-column>

            <el-table-column label="最后修改时间" width="180" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.update_time }}</span>
                </template>
            </el-table-column>


            <el-table-column label="添加时间" width="180" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.create_time }}</span>
                </template>
            </el-table-column>


            <el-table-column label="操作" min-width="150px" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" plain icon="el-icon-view"
                               type="primary">查看详情
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
        <template slot="footer">
            <pagination v-show="total>0"
                        :total="total"
                        :page.sync="queryParam.current"
                        :limit.sync="queryParam.size"
                        @pagination="getList"/>
        </template>
    </d2-container>
</template>

<script>

    import {page} from "@/api/goods/brand";
    import Pagination from '@/components/Pagination'

    export default {
        name: "brand_list",
        components: {
            Pagination
        },
        data() {
            return {
                filename: __filename,
                listLoading: false,
                tableData: [],
                total: 0,
                selectedRows: [],
                queryParam: {
                    current: 1,
                    size: 10
                }
            }
        },
        computed: {
            isShowBatchDeleteBtn: function () {
                return this.selectedRows.length > 0;
            }
        },
        created() {
            this.getList();
        },
        methods: {
            getList() {
                this.listLoading = true;
                page(this.queryParam).then(res => {
                    this.listLoading = false;
                    this.tableData = res.records;
                    this.total = parseInt(res.total);
                })
            },
            handleSelectionChange(rows) {
                this.selectedRows = rows;
            }
        }
    }
</script>

<style>

    .el-tooltip__popper {
        max-width: 30%
    }

    .icon {
        width: 30px;
        height: 30px;
    }
</style>
